<template>
	<view class="return_box" :style="{ top: statusBarHeight + 'px' }">
		<image style="width: 64rpx; height: 64rpx" @click="goBack" :src="imgUrl + 'imgs/chaoshan/chaoshan_back.png'"
			mode=""></image>
	</view>

	<view class="content" :style="{
			paddingTop: statusBarHeight + 44 + 20 + 'px',
			paddingLeft: 0,
			paddingRight: 0,
			paddingBottom: 0
		}">
		<!-- 图片 -->
		<view class="picture" v-if="detail_info.articleUrlType == 1">
			<!-- 点赞转发 -->
			<view class="chaoshan_funcList" :style="{ right: windowWidth / 2 - clientWidth / 2 + 20 + 'px' }">
				<view class="icon-box" @click="setPraise">
					<i :class="[
							'iconfont iconxihuan icon-btn',
							detail_info.praise ? 'color-red' : ''
						]"></i>
					<view class="func_text" style="margin-bottom: 56rpx">
						{{ detail_info.praiseNum }}
					</view>
				</view>
				<image :src="imgUrl + 'imgs/chaoshan/chaoshan_transfer.png'" @click="showShare = true"></image>
				<view class="func_text">更多</view>
			</view>

			<!-- 翻页 -->
			<view class="page_box" :style="{
					top: statusBarHeight + 44 + 10 + 'px',
					right: windowWidth / 2 - clientWidth / 2 + 10 + 'px'
				}">
				{{ current + 1 }}/{{ detail_info.articleUrls.length }}
			</view>
			<view class="indicator" v-if="detail_info.articleUrls.length > 1"
				:style="{ bottom: bottom ? bottom + 'px' : '10px' }">
				<view class="indicator__dot" :style="{
						width: clientWidth / detail_info.articleUrls.length - 10 + 'px'
					}" v-for="(item, index) in detail_info.articleUrls" :key="index"
					:class="[index === current && 'indicator__dot--active']"></view>
			</view>

			<!-- 图片轮播 -->
			<up-swiper @change="(e) => (current = e.current)" :list="detail_info.articleUrls" keyName="image"
				:autoplay="false" height="1000rpx" :circular="true" radius="0" imgMode="aspectFit"></up-swiper>
		</view>

		<!-- 视频 -->
		<view class="videoBox" :style="{ width: clientWidth + 'px' }" v-if="detail_info.articleUrlType == 2">
			<y-video-slide video-height="100vh" :data="videoData" :videoIndex.sync="currentIndex"
				@share="showShare = true" @fabulous="setPraise"></y-video-slide>
		</view>

		<!-- 信息展示 -->
		<view class="info" v-if="detail_info.articleUrlType == 1">
			<view class="title">
				{{ detail_info.articleTitle || '先贤祠墓念堂' }}
			</view>
			<view class="text">
				{{ isShort ? detail_info.articleContent : content_short }}
				<view class="expand" @click="expand" v-if="isShow">
					{{ isShort ? '收起' : '展开' }}
				</view>
			</view>
		</view>

		<sharePopup v-model:show="showShare" title="更多" height="592rpx" :isReport="true" :reportType="4"
			:reportedId="detail_info.id"></sharePopup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		reactive
	} from 'vue';
	import {
		imgUrl
	} from '@/external/utils/imgUrl.js';
	import navigatorCompVue from '@/components/navigator/index.vue';
	import popupCompVue from '/components/popup/index.vue';
	import sharePopup from '/components/popup/share.vue';
	import shareFuc from '@/utils/share';
	import {
		commentListApi,
		commentCreateApi,
		praiseApi,
		chaoshanPraiseApi
	} from '@/API/chaoshan/index.js';
	import {
		onLoad,
		onShow,
		onUnload,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		timeFormat
	} from '@/node_modules/uview-plus';

	const videoData = ref();

	const statusBarHeight = getApp().globalData.statusBarHeight;
	const clientWidth = document?.body.clientWidth || uni.getSystemInfoSync().screenWidth;
	const windowWidth = uni.getSystemInfoSync().windowWidth;
	const bottom = getApp().globalData.bottom;
	const current = ref(0);

	const upOption = ref({
		empty: false
	});
	const scrollTop = ref(0);
	const content_short = ref('');
	const isShort = ref(false); //是否收缩
	let isShow = ref(false);

	//分享弹框
	const showShare = ref(false);
	let txt = ref('');
	let list = ref([]);
	let detail_info = ref({});
	onUnload(() => {
		if (uni.getStorageSync('children')) {
			uni.removeStorage({
				key: 'children'
			});
		}
	});
	onLoad((o) => {
		if (uni.getStorageSync('children')) {
			uni.removeStorage({
				key: 'children'
			});
		}
		if (o.item) {
			detail_info.value = JSON.parse(o.item);
			videoData.value = [{
				id: '1',
				createdAt: detail_info.value.createdAt,
				isFabulous: detail_info.value.praise, //是否点赞
				userNick: detail_info.value.articleTitle,
				videoContent: detail_info.value.articleContent,
				fabulousCount: detail_info.value.praiseNum, //点赞数量
				videoUrl: detail_info.value.articleUrls[0],
				posterUrl: detail_info.value.videoCover
			}];
		}
	});

	//分享微信
	onShareAppMessage(() => {
		const promise = new Promise((resolve) => {
			setTimeout(() => {
				resolve({
					title: '自定义转发标题'
				});
			}, 2000);
		});
		return {
			title: '自定义转发标题',
			path: '/page/user?id=123',
			promise
		};
	});

	//分享朋友圈
	onShareTimeline(() => {
		const promise = new Promise((resolve) => {
			setTimeout(() => {
				resolve({
					title: '自定义转发标题'
				});
			}, 2000);
		});
		return {
			title: '自定义转发标题',
			path: '/page/user?id=123',
			promise
		};
	});

	onMounted(() => {
		//缩写
		if (detail_info.value.articleContent.length > 38) {
			content_short.value = detail_info.value.articleContent.substring(0, 38) + '...';
			isShow.value = true;
		} else {
			content_short.value = detail_info.value.articleContent;
			isShow.value = false;
		}
	});

	/**
	 * 举报
	 */
	const report = () => {
		uni.navigateTo({
			url: '/subPages/chaoshan/report',
			success: () => {
				showShare.value = false;
			}
		});
	};
	/**
	 * 返回上一页
	 */
	const goBack = () => {
		let pages = getCurrentPages();
		if (pages.length > 1) {
			uni.navigateBack();
		} else {
			uni.reLaunch({
				url: '/pages/home/index/index'
			});
		}
	};

	/**
	 * 点击右上角分享
	 */
	const openShare = () => {
		showShare.value = true;
	};

	const closeShare = () => {
		showShare.value = false;
	};

	/**
	 * 展开
	 */
	const expand = () => {
		isShort.value = !isShort.value;
	};

	/**
	 * 点赞
	 */
	const setPraise = async () => {
		let res = await chaoshanPraiseApi({
			id: detail_info.value.id,
			praise: detail_info.value.praise === 1 ? 0 : 1
		});
		if (res.code === 0) {
			detail_info.value.praise = res.data.Praise;
			detail_info.value.praiseNum = res.data.PraiseNum;
		}
	};
</script>

<style lang="scss">
	@import '@/static/css/font.css';

	page {
		background-color: #1e201f !important;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.page_box {
		position: fixed;
		right: 32rpx;
		width: 80rpx;
		height: 44rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #ffffff;
		line-height: 44rpx;
		text-align: center;
		z-index: 999;
	}

	.indicator {
		@include flex(row);
		justify-content: center;
		position: fixed;
		bottom: 30rpx;

		&__dot {
			height: 2px;
			width: 50px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.return_box {
		position: fixed;
		height: 88rpx;
		width: 100%;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		box-sizing: border-box;
		z-index: 999;
	}

	.chaoshan_funcList {
		position: fixed;
		top: 61.45%;
		display: flex;
		align-items: center;
		flex-direction: column;
		z-index: 999;

		.iconxihuan {
			transition: all 0.3s;
		}

		.iconxihuan:active {
			transform: scale(1.5);
		}

		.icon-box {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 56rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;
			color: white;
			text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

			.color-red {
				color: #f73b3b;
			}

			.icon-btn {
				font-size: 50rpx;
			}
		}

		image {
			width: 64rpx;
			height: 64rpx;
			text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
		}

		.func_text {
			margin-top: 8rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #ffffff;
			line-height: 36rpx;
			text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
		}
	}

	::v-deep .u-swiper {
		overflow: auto !important;
		background-color: #1e201f !important;
	}

	::v-deep .u-swiper__wrapper__item__wrapper__image {
		height: 1000rpx !important;
	}

	.picture {
		position: relative;
	}

	.info {
		position: relative;
		bottom: calc(1170rpx + env(safe-area-inset-bottom) - 100%);
		padding: 0 32rpx;

		.title {
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 48rpx;
			letter-spacing: 1px;
		}

		.text {
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 42rpx;
			text-align: justify;
			overflow: scroll;
		}

		.expand,
		.retract {
			font-size: 28rpx;
			color: #f3e0bb;
			line-height: 45rpx;
			float: right;
		}
	}

	::v-deep .uni-video-container {
		background-color: #292b2a !important;
	}

	::v-deep .uni-video-bar {
		background: none !important;
	}

	.videoBox {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);

		video,
		.poster {
			width: 100%;
			height: 100vh;
			background-color: #1e201f;
		}

		.stop {
			position: absolute;
			width: 120rpx;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.video_info {
			position: fixed;
			bottom: 62rpx;
			z-index: 9999;
			padding: 0 32rpx;
			box-sizing: border-box;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #ffffff;
				line-height: 48rpx;
				letter-spacing: 1px;
			}

			.text {
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 42rpx;
				text-align: justify;
			}

			.expand,
			.retract {
				font-size: 28rpx;
				color: #f3e0bb;
				line-height: 45rpx;
				float: right;
			}
		}
	}

	.footer {
		width: 100%;
		z-index: 101 !important;

		.footerBox {
			width: 100%;
			height: calc(env(safe-area-inset-bottom) + 112rpx);
			background-color: #0e0e0e;
		}

		.footerFixed {
			position: fixed;
			background-color: #0e0e0e;
			bottom: 0;
			left: 0;
			width: 100%;
			height: calc(env(safe-area-inset-bottom) + 112rpx);
			z-index: 1000;
			display: flex;
			align-items: center;
			padding: 16rpx 32rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
			box-sizing: border-box;
		}

		.placeholderClass {
			font-size: 28rpx;
			color: #969da3;
			line-height: 33rpx;
			font-style: normal;
			text-transform: none;
		}

		::v-deep .u-input {
			padding: 0 40rpx !important;
			font-size: 28rpx;
			color: #fff;
			line-height: 33rpx;
		}

		image {
			margin-right: 8rpx;
			width: 48rpx;
			height: 48rpx;
		}

		.text {
			margin-right: 32rpx;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 33rpx;
			font-style: normal;
			text-transform: none;
		}
	}

	.commentScrollView {
		width: 100%;
		height: 100%;
		padding: 0rpx 0rpx 120rpx;
		box-sizing: border-box;
	}

	.commentTitle {
		.area {
			height: 114rpx;
		}

		.fixedTitle {
			width: 100%;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 32rpx;
			padding: 40rpx 0;
			text-align: center;
			position: fixed;
			background-color: #0e0e0e;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			z-index: 999;
		}

		.close {
			position: absolute;
			right: 32rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 48rpx;
			height: 48rpx;
		}
	}

	.commentList {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;

		.commentBox {
			display: flex;
			align-items: flex-start;
			width: 100%;
			padding: 40rpx 0 32rpx 0;
			border-bottom: 2rpx solid #1d1d1d;

			.avater {
				width: 80rpx;
				height: 80rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin-right: 16rpx;
			}

			.avater_child {
				width: 56rpx;
				height: 56rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin-right: 24rpx;
			}

			.commentInfo {
				flex: 1;
			}

			.top {
				width: 100%;
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 18rpx;
			}

			.name {
				font-size: 28rpx;
				color: #999999;
				line-height: 28rpx;
			}

			.dot {
				width: 40rpx;
				height: 40rpx;
			}

			.middleText {
				font-size: 30rpx;
				color: #ffffff;
				line-height: 45rpx;
				text-align: justified;
				margin-bottom: 24rpx;
			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.time {
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;
				}

				image {
					margin-right: 8rpx;
					width: 48rpx;
					height: 48rpx;
				}

				.text {
					font-size: 28rpx;
					color: #ffffff;
					line-height: 33rpx;
					font-style: normal;
					text-transform: none;
				}
			}

			.showMoreComment {
				font-size: 26rpx;
				color: #f3e0bb;
				line-height: 26rpx;
				// margin-left: 82rpx;
				margin-top: 32rpx;
				margin-bottom: 32rpx;
			}
		}

		.commentBox:last-child {
			border-bottom: 0;
		}

		.commenBox_child:first-child {
			padding-bottom: 0 !important;
		}

		.commenBox_child:last-child {
			padding-bottom: 0;
		}
	}

	.funcList {
		display: flex;
		width: 100%;
		padding: 0 48rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		color: #ffffff;
		line-height: 30rpx;
		padding-bottom: 45rpx;

		.fun {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 52rpx;
		}

		image {
			width: 96rpx;
			height: 96rpx;
			margin-bottom: 16rpx;
		}
	}
</style>